<template>
	<view class="page-container">
		<!-- 搜索栏 - 增加渐变背景和吸顶阴影 -->
		<view class="search-bar" :class="{ sticky: !isScrollTop }">
			<uni-search-bar 
				radius="30"
				v-model="searchKey" 
				placeholder="请输入商品名称..."
				bgColor="#ffffff"
				placeholderColor="#999"
				@confirm="onSearch"
				class="custom-search"
			>
				<template v-slot:left-icon>
					<uni-icons type="search" size="18" color="#666"></uni-icons>
				</template>
			</uni-search-bar>
		</view>

		<!-- 轮播图 - 优化尺寸和指示器 -->
		<view class="swiper-container">
			<swiper 
				autoplay 
				circular 
				:indicator-dots="true"
				indicator-active-color="#ff6700"
				class="custom-swiper"
			>
				<swiper-item 
					v-for="(image, index) in swiperImages" 
					:key="index"
					class="swiper-item"
				>
					<image 
						:src="image" 
						mode="aspectFill"
						class="swiper-image"
						:lazy-load="true"
					/>
				</swiper-item>
			</swiper>
		</view>

		<!-- 骨架屏 - 优化加载效果 -->
		<view v-if="isLoading" class="skeleton-container">
			<uni-skeleton 
				type="rect,rect,rect" 
				:loading="true" 
				:animation="true"
				class="skeleton-item"
			></uni-skeleton>
		</view>

		<!-- 商品列表 - 卡片式设计 -->
		<view class="product-list" v-else-if="products.length > 0">
			<view 
				class="product-card card-shadow"
				v-for="(product, index) in products" 
				:key="index"
				@click="handleCardClick(product)"
			>
				<view class="image-wrapper">
					<image 
						:src="product.image" 
						mode="aspectFill"
						class="product-image"
					/>
					<view class="countdown-badge">
						{{ formatCountdown(product.endTime) }}
					</view>
				</view>

				<view class="content-wrapper">
					<text class="product-title">{{ product.title }}</text>
					<view class="price-section">
						<text class="discount-price">¥{{ product.discountPrice }}</text>
						<text class="original-price">¥{{ product.originalPrice }}</text>
					</view>
				</view>

				<view class="cart-wrapper" @click.stop="handleCartClick(product.saleProductId)">
					<uni-icons type="cart" size="28" color="#666"></uni-icons>
					<text v-if="product.cartCount > 0" class="cart-badge">
						{{ product.cartCount }}
					</text>
				</view>
			</view>
		</view>

		<!-- 空状态 - 优化视觉效果 -->
		<view class="empty-container" v-else>
			<image 
				src="/static/empty.png" 
				mode="widthFix"
				class="empty-image"
			/>
			<text class="empty-text">暂无抢购商品哦~</text>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request';
	export default {
		data() {
			return {
				// 搜索框相关属性
				searchKey: '',
				// 轮播图相关属性
				swiperImages: [
					'/static/carousel.png',
					'/static/carousel.png',
					'/static/carousel.png'
				],
				// 商品列表相关属性
				isLoading: false,
				products: [],
				isScrollTop: true,
				countdownBgColor: '#f0f0f0'
			};
		},
		methods: {
			// 搜索框相关事件方法
			async onSearch() {
				this.isLoading = true;
				try {
					const resp = await request({
						url: 'timesale/queryTimeSaleProducts', // 后端接口地址
						method: 'POST',
						data: this.searchKey
					});
					this.products = resp.data; // 赋值给data中的products
				} catch (error) {
					console.error('获取商品列表失败:', error);
					uni.showToast({
						title: '获取商品失败',
						icon: 'none'
					});
				} finally {
					this.isLoading = false;
				}
			},
			handleScroll() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			// 商品列表相关事件方法
			startCountdown() {
				setInterval(() => {
					this.$forceUpdate();
				}, 1000);
			},
			formatCountdown(endTime) {
				const timestamp = Date.parse(endTime.replace(' ', 'T'));
				const now = new Date().getTime();
				const diff = timestamp - now;
				if (diff <= 0) {
					return '00:00:00';
				}
				const hours = Math.floor(diff / (1000 * 60 * 60));
				const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
				const seconds = Math.floor((diff % (1000 * 60)) / 1000);
				return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
			},
			// 点击事件处理函数（通过商品ID更新对应数据）
			handleCartClick(productId) {
				this.products = this.products.map(product => {
					if (product.saleProductId === productId) {
						return {
							...product, // 展开原有属性
							cartCount: product.cartCount + 1 // 数量+1
						};
					}
					return product;
				});
			},
			// 保存购物车信息
			async saveCart() {
				// 获取所有商品数量不为0的购物车
				const cart = this.products.filter(product => {
					return (product.cartCount ?? 0) > 0;
				});
				// 调用后端接口保存购物车信息
				const resp = await request({
					url: 'timesale/saveCart',
					method: 'POST',
					data: cart
				});
			}
		},
		onLoad() {
			// 页面加载时执行的相关操作
			this.startCountdown();
			this.handleScroll();
			this.onSearch();
		},
		onPageScroll(e) {
			this.isScrollTop = e.scrollTop === 0;
		},
		onShow() {
			this.onSearch();
		},
		onHide() {
			this.saveCart();
		}
	};
</script>

<style lang="scss" scoped>
/* 新增设计变量 */
$primary-color: #ff6700;
$danger-color: #ff0036;
$text-dark: #333;
$text-light: #666;
$border-color: #eee;

.page-container {
	padding: 0 24rpx 40rpx;
	background: #f8f8f8;
}

/* 搜索栏优化 */
.search-bar {
	padding: 24rpx 0;
	background: #fff;
	transition: all 0.3s;
	
	&.sticky {
		position: sticky;
		top: 0;
		z-index: 999;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
	}
	
	.custom-search {
		border-radius: 48rpx !important;
	}
}

/* 轮播图优化 */
.swiper-container {
	height: 320rpx;
	margin: 24rpx 0;
	border-radius: 24rpx;
	overflow: hidden;
	
	.custom-swiper {
		height: 100%;
		
		.swiper-image {
			width: 100%;
			height: 100%;
		}
	}
}

/* 商品列表优化 */
.product-list {
	.product-card {
		background: #fff;
		border-radius: 24rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		transition: all 0.3s;
		
		&:active {
			transform: scale(0.98);
		}

		.image-wrapper {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			margin-right: 24rpx;
			
			.product-image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
			
			.countdown-badge {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba($danger-color, 0.9);
				color: #fff;
				padding: 8rpx;
				font-size: 24rpx;
				text-align: center;
				border-radius: 0 0 16rpx 16rpx;
			}
		}

		.content-wrapper {
			flex: 1;
			
			.product-title {
				font-size: 32rpx;
				color: $text-dark;
				font-weight: 500;
			}
			
			.price-section {
				margin-top: 16rpx;
				display: flex;
				align-items: baseline;
				
				.discount-price {
					color: $danger-color;
					font-size: 36rpx;
					font-weight: 600;
				}
				
				.original-price {
					color: $text-light;
					font-size: 24rpx;
					margin-left: 16rpx;
					text-decoration: line-through;
				}
			}
		}

		.cart-wrapper {
			position: relative;
			padding: 16rpx;
			
			.cart-badge {
				position: absolute;
				top: 4rpx;
				right: 4rpx;
				background: $danger-color;
				color: #fff;
				min-width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 8rpx;
			}
		}
	}
}

/* 空状态优化 */
.empty-container {
	padding: 100rpx 0;
	text-align: center;
	
	.empty-image {
		width: 400rpx;
		height: 400rpx;
	}
	
	.empty-text {
		display: block;
		color: $text-light;
		font-size: 28rpx;
		margin-top: 24rpx;
	}
}

.card-shadow {
	box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.08);
}
</style>